<template>
	<div class="sidebar" id="sidebar">
		<div class="ul_">
			<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157" text-color="#bfcbd9" active-text-color="#20a0ff" @select='changeRouter' unique-opened router>
				<template v-for="item in items">
					<template v-if="item.childrenList && item.childrenList.length>0 && item.childrenList[0].menuBtn==0">
						<el-submenu :index="item.permissionUri">
							<template slot="title">
								<i class="my-icon" :class="item.classIcon"></i><span slot="title">{{ item.permissionName }}</span>
							</template>
							<el-menu-item v-for="(subItem,i) in item.childrenList" :key="i" :index="subItem.permissionUri">
								{{ subItem.permissionName }}
							</el-menu-item>
						</el-submenu>
					</template>
					<template v-else-if="item.menuBtn==0">
						<el-menu-item :index="item.permissionUri">
							<i class="my-icon" :class="item.classIcon"></i><span slot="title">{{ item.permissionName}}</span>
						</el-menu-item>
					</template>
				</template>
			</el-menu>
		</div>
		<div class="slideIn my_flex_center hover" @click="changeCollapse">
			||
		</div>
	</div>
</template>

<script>
	import bus from '../common/bus';
	export default {
		data() {
			return {
				collapse: false,
				items: [],
			}
		},
		inject: ['reload'],
		computed: {
			onRoutes() {
				return this.$route.path.replace('/', '');
			}
		},
		created() {
			// 通过 Event Bus 进行组件间通信，来折叠侧边栏
			bus.$on('collapse', msg => {
				this.collapse = msg;
			})
			bus.$on('message', res => {
				if(res.code == 14) {
					this.$router.push('/login');
					return;
				}
				if(res.code != 1) {
					this.$message({
						message: res.msg,
						type: 'error'
					});
				}
			})

			bus.$on('changeValue', res => {
				let arr_key = res.arr_key
				for(let key_ of arr_key) {
					let data = res.data[key_];
					let obj = {
						name: key_,
						value: data
					}
					this.$store.commit('changeValue', obj);
				}
			})

			let params = {};
			this.httptool.ajaxPost(this.apis.getPermissionList, params, (res) => {
				let datas = res.data;
				this.items = datas;
			});
		},
		methods: {
			changeCollapse() {
				this.collapse = !this.collapse;
				bus.$emit('collapse', this.collapse);
			},
			changeRouter(url) {
				let currentUrl = this.$route.fullPath.replace('/', '');
				if(url == currentUrl) {
					this.reload();
				}
			}
		}
	}
</script>

<style lang="less" src="../../less/sidebar.less"></style>